<div  ng-controller="ProcessListCtrl">
    <div class="app-content-body fade-in-up" infinite-scroll='scrollEvent()' infinite-scroll-disabled="isLoad" infinite-scroll-distance="0" >
        <div class="hbox hbox-auto-xs hbox-auto-sm"   >
            <div class="col w-md bg-light dk b-r bg-auto" >
                <div class="wrapper bg-light lter b-b">
                    <div class="input-group">
                        <input type="text" ng-model="searchValue"  ng-keydown="searchProcessList($event)"  class="form-control input-sm bg-light no-border rounded padder" placeholder="{{'process.toolbar.searchProcess'|translate}}">
                              <span class="input-group-btn">
                                <button type="submit" class="btn btn-sm bg-light rounded" ng-click="searchProcessList()"><i class="fa fa-search"></i></button>
                              </span>
                    </div>
                </div>
                <div class="wrapper"  >
                    <div style="padding-left:10px;margin-bottom: 5px;"  >
                        <span class="text-info" > <div style="padding-top:10px;padding-bottom:10px;"  ><b ><i class="fa fa-angle-down" ></i>&nbsp;&nbsp;{{'process.nav.filterLabel'|translate}}</b></div></span>
                        <ul class="nav nav-pills nav-stacked nav-sm">
                            <li ng-class="myProcessFilterClass('1')" >
                                <a ng-click="setMyProcess('1')" >
                                    <span>{{'process.nav.myProcess'|translate}}</span>
                                </a>
                            </li>
                            <li ng-class="myProcessFilterClass('0')" >
                                <a ng-click="setMyProcess('0')" >
                                    <span >{{'process.nav.myInvolved'|translate}}</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div style="padding-left:10px;margin-bottom: 5px;"  >
                        <span class="text-info"   > <div style="padding-top:10px;padding-bottom:10px;"  ><b ><i class="fa fa-angle-down" ></i>&nbsp;&nbsp;{{'process.nav.status'|translate}}</b></div></span>
                        <ul class="nav nav-pills nav-stacked nav-sm" >
                        <li ng-class="statusFilterClass(0)" >
                            <a   ng-click="setStatus(0)" >
                                <i class="fa fa-fw fa-circle"  style="color: #23b7e5"  ></i>
                                <span>{{'process.status.0'|translate}}</span>
                                <span ng-show="processCount.status0>0" > [ {{processCount.status0}} ]</span>
                                <i class="icon-check pull-right filter-close" ></i>
                            </a>
                        </li>
                        <li ng-class="statusFilterClass(2)" >
                            <a   ng-click="setStatus(2)" >
                                <i class="fa fa-fw fa-circle"  style="color: #fad733" ></i>
                                <span>{{'process.status.2'|translate}}</span>
                                    <span ng-show="processCount.status2>0" > [ {{taskCount.status2}} ]</span>
                                <i class="icon-check pull-right filter-close" ></i>
                            </a>
                        </li>
                        <li ng-class="statusFilterClass(4)" >
                            <a   ng-click="setStatus(4)" >
                                <i class="fa fa-fw fa-circle" style="color: #FF0000"></i>
                                <span>{{'process.status.4'|translate}}</span>
                                <span ng-show="processCount.status4>0" > [ {{processCount.status4}} ]</span>
                                <i class="icon-check pull-right filter-close" ></i>
                            </a>
                        </li>
                            <li ng-class="statusFilterClass(3)" >
                                <a   ng-click="setStatus(3)" >
                                    <i class="fa fa-fw fa-circle" style="color: #030303"></i>
                                    <span>{{'process.status.3'|translate}}</span>
                                    <span ng-show="processCount.status3>0" >[{{processCount.status3}}]</span>
                                    <i class="icon-check pull-right filter-close" ></i>
                                </a>
                            </li>
                            <li ng-class="statusFilterClass(1)" >
                                <a   ng-click="setStatus(1)" >
                                    <i class="fa fa-fw fa-circle" style="color: #27c24c"></i>
                                    <span>{{'process.status.1'|translate}}</span>
                                    <i class="icon-check pull-right filter-close" ></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div style="padding-left:10px;margin-bottom: 5px;"  >
                        <span class="text-info"  > <div style="padding-top:10px;padding-bottom:10px;"  ><b ><i class="fa fa-angle-down" ></i>&nbsp;&nbsp;{{'process.nav.label'|translate}}</b></div></span>
                        <ul class="nav nav-pills nav-stacked nav-sm">
                            <li ng-class="labelFilterClass('urgent')" >
                                <a ng-click="setLabel('urgent')" >
                                    <span>{{'process.nav.urgent'|translate}}</span>&nbsp;&nbsp;<i class="glyphicon glyphicon-flash icon "></i>
                                    <i class="icon-check pull-right filter-close" ></i>
                                </a>
                            </li>
                            <li ng-class="labelFilterClass('overdue')" >
                                <a ng-click="setLabel('overdue')" >
                                    <span >{{'process.nav.overdue'|translate}}</span>&nbsp;&nbsp;<i class="glyphicon glyphicon-time icon "></i>
                                    <i class="icon-check pull-right filter-close" ></i>
                                </a>
                            </li>
                            <li ng-class="labelFilterClass('favorite')" >
                                <a ng-click="setLabel('favorite')" >
                                    <span>{{'process.nav.favorite'|translate}}</span>&nbsp;&nbsp;<i class="glyphicon glyphicon-star icon "></i>
                                    <i class="icon-check pull-right filter-close" ></i>
                                </a>
                            </li>
                            <li ng-class="labelFilterClass('day')" >
                                <a ng-click="setLabel('day')" >
                                    <span>{{'process.nav.day'|translate}}</span>&nbsp;&nbsp;<i class="glyphicon  glyphicon-ok-circle icon "></i>
                                    <i class="icon-check pull-right filter-close" ></i>
                                </a>
                            </li>


                        </ul>
                    </div>

                </div>
            </div>
            <div class="col" >
                <div class="wrapper bg-light lter b-b" style="height:61px;">
                    <ul class="breadcrumb" style="display: block;float:left;background:none;">
                        <li><a ui-sref="app.news" ><i class="iconfont icon-xinwen"></i> {{'aside.nav.news'|translate}}</a></li>
                        <li><a ui-sref="app.records" ><i class="iconfont icon-danganliebiao"></i> {{'aside.nav.records'|translate}}</a></li>
                        <li class="active"> {{'process.processRecords'|translate}}</li>
                    </ul>
                    <div class="pull-right m-r-sm " style="margin-top: 8px;" >
                        <span ng-show="isMyProces==1" >{{'process.nav.myProcess'|translate}}</span>
                        <span ng-show="isMyProces==0" >{{'process.nav.myInvolved'|translate}}</span>
                        <span ng-show="statusFilter!=null" >{{'process.status.'+statusFilter|translate}}</span>
                        <span ng-show="labelFilter!=null" >{{'process.nav.'+labelFilter|translate}}</span>
                        <span ng-show="searchValue!=null&&searchValue!=''" >{{'common.search'|translate}} {{searchValue}}</span>
                        {{'common.general'|translate}} {{totalCount}} {{'process.barProcess'|translate}}
                    </div>

                </div>
                <div class=""  >
                    <div class="">
                        <table class="table table-striped b-t b-light">
                            <thead>
                            <tr>
                                <th style="width:5px;padding: 0;"></th>
                                <!--<th style="width:10px;padding-right: 10px;">
                                    <label class="i-checks m-b-none">
                                        <input type="checkbox"><i></i>
                                    </label>
                                </th>-->
                                <th >&nbsp;&nbsp;&nbsp;{{'process.processName'|translate}}</th>
                                <th style="width: 100px;">{{'process.statusLabel'|translate}}</th>
                                <th>{{'process.initiator'|translate}}</th>
                                <th>{{'process.startTime'|translate}}</th>
                                <th>{{'process.deadline'|translate}}</th>
                                <th>{{'process.setbacks'|translate}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="pp in process" class="tasks" ng-click="showProcessdetail(pp.id)" id="process_{{pp.id}}"  >
                                <td ng-show="pp.priority==2" style="padding: 0;vertical-align: top;background-color: #f05050;" ></td>
                                <td ng-show="pp.priority==1" style="padding: 0;vertical-align: top;background-color: #ff9800;" ></td>
                                <td ng-show="pp.priority==0" style="padding: 0;vertical-align: top;" ></td>
                               <!-- <td style="padding-right: 10px;" ><label class="i-checks m-b-none"><input type="checkbox" name="post[]"><i></i></label></td>-->
                                <td style="white-space: nowrap;" >
                                    <a href ui-toggle-class class="m-xs" style="font-size: 15px;" ng-click="setFavorite(pp.id,pp.favorite,$event)" ng-class="isFavorite(pp.favorite)" >
                                        <i class="fa fa-star text-warning text-active" ></i>
                                        <i class="fa fa-star-o  text" style="color:#98a6ad;"  ></i>
                                    </a>&nbsp;
                                    <a  ><span ng-bind-html="pp.name"></span></a>
                                </td>
                                <td><span class="label" ng-class="processStatusBg(pp.status)" >{{'process.status.'+pp.status|translate}}</span></td>
                                <td>
                                    <span class="thumb-xs avatar m-r-xs">
                                        <div class="image" href="#/app/userprofile/{{pp.initiator.userName}}" style="background-image: url('/suite/plugins/servlet/getUserAvatar?user={{pp.initiator.userName}}')" ></div>
                                    </span>
                                    {{pp.initiator.firstName}}</td>
                                <td>{{pp.starttime | fromNow}}</td>
                                <td><i ng-show="pp.overdue" class="iconfont icon-naozhonglingsheng icon-max text-danger"  ></i>&nbsp;
                                    <span ng-show="pp.deadline!=null&&pp.deadline!=''" >{{pp.deadline | fromNow}}</span>
                                    <span ng-show="pp.deadline==null||pp.deadline==''" >-</span></td>
                                <td>
                                    <div ui-jq="easyPieChart" ui-options="{
                                              percent: {{pp.ppPercent}},
                                              lineWidth: 3,
                                              trackColor: '{{app.color.light}}',
                                              barColor: ppPercentBarColor({{pp.ppPercent}}),
                                              scaleColor: false,
                                              color: '#fff',
                                              size: 40,
                                              lineCap: 'butt',
                                              rotate: 40,
                                              animate: 1000
                                            }">
                                        <div>
                                            <span class="step">{{pp.ppPercent}}</span>%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr ng-show="process.length==0" >
                                <td colspan="7" style="background-color: #f0f3f4;" >
                                    <div   style="text-align: center;margin-top: 30px;" ><i class="iconfont  icon-meiyousoudaoxinxi" style="font-size: 23px;" ></i>&nbsp;&nbsp;{{'process.noProcess'|translate}}</div>
                                </td>
                            </tr>
                            </tbody>

                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>